<script setup>
import { ref, onMounted, reactive } from 'vue'
import { dayjs, ElMessage } from 'element-plus'
import utc from 'dayjs/plugin/utc'
import duration from 'dayjs/plugin/duration'
dayjs.extend(utc)
dayjs.extend(duration)

let columns = ref([])
let tableData = ref([])
let total = ref(0)
let pageIndex = ref(1)
let pageSize = ref(100000)
let loading = ref(false)
let TotalData = ref(false)

// 表单查询
let formInline = reactive({
  nickName: '',
  user_id_str: '',
  // updatedAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss')
})
// 表单提交
const onSubmit = async () => {
  console.log('submit!', formInline)
  await HuoShanTokenList()
}
// 检测账号状态
async function CheckAccountStatus(item) {
  console.warn('CheckAccountStatus', item)
  if (tableData.value.length == 0) {
    ElMessage({
      type: 'error',
      message: '没有可用的账号数据!'
    })
    return
  }
  if (item == 'batch') {
    console.warn('CheckAccountStatus', item)
    ElMessage({
      type: 'success',
      message: '批量检测账号状态成功!'
    })
    return
  }
  ElMessage({
    type: 'success',
    message: '检测账号状态成功!'
  })
}
columns.value.push(
  ...[
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'nickName',
      label: '用户名称'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'user_id_str',
      label: '用户Id'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'sec_user_id',
      label: '用户加密Id'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'x_tt_token',
      label: '用户x_tt_token'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'token',
      label: 'token'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'status',
      label: '状态'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'createdAt',
      label: '创建时间'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'updatedAt',
      label: '更新时间'
    },
    {
      align: 'center',
      width: '',
      show: true,
      prop: 'operation',
      label: '操作'
    }
  ]
)

/**
 *
 * @returns 获取账号列表
 *
 */
async function HuoShanTokenList() {
  loading.value = true
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 100)
  })
  let DouYionEquipment = `http://208.87.207.213:38390/CloudUser/HuoShanTokenList?sgin=47CFD0A2EB7EA1DC043F1B91926890E9&page=${pageIndex.value}&pageNo=${pageSize.value}`
  // const SendData = {}
  const response_ = await fetch(DouYionEquipment, {
    method: 'GET',
    headers: {
      'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: undefined
  })
  let response = await response_.json()
  localStorage.setItem('HuoShanTokenList', JSON.stringify(response.data))
  loading.value = false
  console.warn(response.data)
  total.value = response.data.count
  tableData.value = response.data.rows.slice(0, 50)
  TotalData.value = response.data.rows.length
}

onMounted(async () => {
  let HuoShanTokenListl = localStorage.getItem('HuoShanTokenList')
  if (HuoShanTokenListl) {
    HuoShanTokenListl = JSON.parse(HuoShanTokenListl)
    total.value = HuoShanTokenListl.count
    tableData.value = HuoShanTokenListl.rows.slice(0, 50)
    TotalData.value = HuoShanTokenListl.rows.length
  } else {
    await HuoShanTokenList()
  }
})

async function handleCurrentChange(number) {
  console.warn('handleCurrentChange', number)
  pageIndex.value = number
  await HuoShanTokenList()
}
</script>

<template>
  <div class="container no-drag">
    <div class="search">
      <el-form ref="queryForm" :inline="true" :model="formInline">
        <el-form-item label="用户名称：">
          <el-input v-model="formInline.nickName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="用户id：">
          <el-input v-model="formInline.user_id_str" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="账号创建时间：">
          <el-input
            v-model="formInline.createdAt"
            :value="formInline.createdAt"
            type="datetime-local"
            placeholder="请选择时间"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="CheckAccountStatus('batch')"
            >批量检测账号状态</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      empty-text="暂无数据"
      border
      stripe
      row-key="id"
      size="large"
      style="width: 100%"
      height="500"
      highlight-current-row
      :header-cell-style="{ background: '#F9F9F9', color: '#606266' }"
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :align="item.align"
        :show-overflow-tooltip="true"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template #default="scope">
          <div v-if="item.prop == 'operation'">
            <el-button size="small" type="primary" @click="CheckAccountStatus(scope.row)"
              >检测账号状态</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 合计统计显示 -->
    <div class="total_tatistics">
      <span>总账号数：{{ TotalData || '0' }} </span>
      <span style="margin-left: 10px">当页账号数：{{ tableData.length || '0' }} </span>
    </div>
    <el-button type="primary" size="small" @click="HuoShanTokenList">更新账号列表</el-button>
    <div class="pagination">
      <el-pagination
        :current-page="pageIndex"
        layout=" prev, pager, next"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="less">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.total_tatistics {
  padding: 12px;
  font-family: auto;
  font-size: 15px;
  font-weight: bold;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px;
}
</style>
